<template>
    <div class="dashboard-container">
        <!---添加搜索组件-->
        <div class="search-div">
            <el-form label-width="70px" size="small">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="关键字">
                            <el-input style="width: 100" v-model="searchObj.name" placeholder="栏目名"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row style="display: flex">
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="fetchData()">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>

                    <el-button type="success" icon="el-icon-plus" size="mini" @click="add">添 加</el-button>
                    <!-- 批量删除按钮 -->
                    <el-button class="btn-add" size="mini" icon="el-icon-delete-solid"
                        @click="batchRemove()">批量删除</el-button>
                </el-row>
            </el-form>
        </div>

        <!--表格-->
        <el-table v-loading="listLoading" :data="list" stripe border style="width: 100%; margin-top: 10px"
            @selection-change="handleSelectionChange">
            >
            <!--复选框-->
            <el-table-column type="selection" />

            <el-table-column label="序号" width="70" align="center">
                <template slot-scope="scope">
                    {{ (page - 1) * limit + scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="name" label="栏目名" />
            <el-table-column prop="createTime" label="创建时间" width="160" />
            <el-table-column label="操作" width="200" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)" title="修改" />
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeDataById(scope.row.id)"
                        title="删除"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!---添加分页组件-->
        <el-pagination :current-page="page" :total="total" :page-size="limit" style="padding: 30px 0; text-align: center"
            layout="total, prev, pager, next, jumper" @current-change="fetchData" />

        <!--添加栏目弹窗-->
        <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%">
            <el-form ref="dataForm" :model="sysCategory" label-width="150px" size="small" style="padding-right: 40px">
                <el-form-item label="栏目名">
                    <el-input v-model="sysCategory.name" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="small" icon="el-icon-refresh-right">取 消</el-button>
                <el-button type="primary" icon="el-icon-check" @click="saveOrUpdate()" size="small">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

import categoryApi from "@/api/category/category.js";

export default ({
    data() {
        return {
            list: [],
            total: 0,
            limit: 5,
            page: 1,
            searchObj: {},
            createTimes: [],
            //批量删除选中的数据
            selectValueData: [],
            //封装表单中栏目角色
            sysCategory: {},
            dialogVisible: false, // 给个默认初始化值 隐藏弹框
        }
    },
    created() {
        this.fetchData(1);
    },
    methods: {
        // 根据id去回显数据
        edit(id) {
            //1.弹框
            this.dialogVisible = true;
            //2.赋值
            categoryApi.findCategoryById(id).then((response) => {
                this.sysCategory = response.data;
            });
        },
        // 打开弹框
        add() {
            // 将 控制弹框的 属性设置为 true
            this.dialogVisible = true;
            // 清空表单
            this.sysCategory = {};
        },
        // 添加或者修改 具体功能
        saveOrUpdate() {
            if (this.sysCategory.id != null) {
                this.updateCategory();
            } else {
                this.addCategory();
            }
        },
        // 实现添加功能
        addCategory() {
            categoryApi.addCategory(this.sysCategory).then((response) => {
                this.$message({
                    type: "success",
                    message: "添加成功!",
                });
                // 关闭弹框
                this.dialogVisible = false;
                // 刷新数据
                this.fetchData();
            });
        },
        //修改
        updateCategory() {
            categoryApi.updateCategory(this.sysCategory).then((response) => {
                this.$message({
                    type: "success",
                    message: "修改成功!",
                });
                // 关闭弹框
                this.dialogVisible = false;
                // 刷新数据
                this.fetchData();
            });
        },
        //重置
        resetData() {
            //表单重置
            this.fetchData();
            //搜索重置
            this.searchObj = {};
        },
        //批量删除
        batchRemove() {
            if (this.selectValueData.length == 0) {
                this.$confirm("请选择要删除的数据");
            }
            this.$confirm("此操作将永久的删除该用户,是否继续？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                var ids = [];

                for (var i = 0; i < this.selectValueData.length; i++) {
                    var obj = this.selectValueData[i];
                    var id = obj.id;
                    ids.push(id);
                }
                categoryApi.deleteUserIds(ids).then((response) => {
                    this.$message({
                        //提示是否删除成功
                        type: "success",
                        message: "删除成功",
                    });
                    //删除成功之后刷新一下表单
                    this.fetchData();
                });
            });
        },
        //将选中的数据传到selectValueData中
        handleSelectionChange(selectValue) {
            //console.log(selectValue);
            this.selectValueData = selectValue;
        },
        //删除
        removeDataById(id) {
            alert(id);
            this.$confirm("此操作将永久的删除该用户,是否继续？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                categoryApi.deleteById(id).then((response) => {
                    this.$message({
                        //提示是否删除成功
                        type: "success",
                        message: "删除成功",
                    });
                    //删除成功之后刷新一下表单
                    this.fetchData();
                });
            });
        },
        //分页查询
        fetchData(page = 1) {
            this.page = page;
            console.log(this.searchObj);
            categoryApi
                .getPageList(this.page, this.limit, this.searchObj)
                .then((Response) => {
                    this.list = Response.data.records;
                    this.total = Response.data.total;
                    
                });
        },
    }
})
</script>




